<template>
  <div class="history-container">
    <h1 class="history-title">通过智能录入生成的账单历史(自动导入)</h1>
    <el-table :data="tableData" style="width: 80%; margin: 0 auto; margin-top: -30px;" v-loading="loading" height="550">
      <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
      <el-table-column label="消费类型" header-align="center" align="center">
        <template slot-scope="scope">
          {{ scope.row.consumptionName }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="录入时刻" header-align="center" align="center">
        <template slot-scope="scope">
          {{ formatterTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="openEditDialog(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改对话框 -->
    <el-dialog title="修改账单" :visible.sync="editDialogVisible" @close="resetEditForm" style="text-align: center;">
      <el-form :model="editForm" :rules="editRules" ref="editForm" style="margin: 0 auto;">
        <el-form-item label="消费类型" prop="consumptionId">
          <el-select v-model="editForm.consumptionId" placeholder="请选择消费类型">
            <el-option v-for="item in consumptionTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="editForm.remark" placeholder="请输入备注" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get, put } from '../../utils/http';
import moment from 'moment';
import { Message } from 'element-ui';

export default {
  name: 'History',
  data() {
    return {
      tableData: [],
      loading: false,
      params: {
        houseId: sessionStorage.getItem('houseId'),
        userId: '000000',
        consumptionId: '000000',
        billType: '000000',
        onlySelf: false,
        inputMethod: '1', // 只查询 inputMethod 为 1 的数据
        createTime: '' // 新增 createTime 字段
      },
      editDialogVisible: false,
      editForm: {
        id: '',
        consumptionId: '',
        remark: '',
        money: '' // 保持字段名一致
      },
      consumptionTypes: [],
      editRules: {
        consumptionId: [{ required: true, message: '请选择消费类型', trigger: 'change' }],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        money: [{ required: true, message: '请输入金额', trigger: 'blur' }]
      }
    };
  },
  mounted() {
    this.getList();
    this.getConsumptionTypes();
  },
  methods: {
    formatterTime(cellValue) {
      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss');
    },
    getList() {
      this.loading = true;
      let { userId, consumptionId, billType, inputMethod, createTime } = this.params;
      if (userId === '000000') {
        userId = sessionStorage.getItem('userId');
      }
      if (consumptionId === '000000') {
        consumptionId = '';
      }
      if (billType === '000000') {
        billType = '';
      }
      if (inputMethod === '000000') {
        inputMethod = '';
      }
      // 确保 createTime 参数不为空字符串
      if (createTime === '000000' || !createTime) {
        createTime = null;
      } else {
        createTime = moment(createTime).format('YYYY-MM-DD HH:mm:ss');
      }
      get('/bill/query', {
        ...this.params,
        userId: userId,
        consumptionId,
        billType,
        inputMethod,
        createTime, // 确保 createTime 是正确的时间格式或 null
      }).then((res) => {
        this.loading = false;
        if (res.description === 'success') {
          // 对获取的数据进行逆序排列
          this.tableData = res.data.list.reverse();
          // 打印从后端获取的数据
          console.log('从后端获取的数据:', res.data);
        }
      }).catch((error) => {
        this.loading = false;
        console.error('请求失败:', error);
      });
    },
    openEditDialog(row) {
      this.editForm.id = row.id;
      this.editForm.consumptionId = row.consumptionId;
      this.editForm.remark = row.remark;
      this.editForm.money = row.money; // 保持字段名一致
      this.editDialogVisible = true;
    },
    resetEditForm() {
      this.$refs.editForm.resetFields();
    },
    submitEditForm() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          put('/bill/update', {
            id: this.editForm.id,
            consumptionId: this.editForm.consumptionId,
            remark: this.editForm.remark,
            money: this.editForm.money // 保持字段名一致
          }).then(res => {
            if (res.description === 'success') {
              Message.success({ message: '修改成功' });
              this.editDialogVisible = false;
              this.getList();
            }
          });
        }
      });
    },
    getConsumptionTypes() {
      get('/consumptionType/query', {
        houseId: this.params.houseId
      }).then(res => {
        if (res.description === 'success') {
          this.consumptionTypes = res.data;
        }
      });
    }
  }
};
</script>

<style scoped>
.history-container {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.history-title {
  margin-top: -20px;
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 2px solid #ccc;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.el-table {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.el-table::before {
  display: none;
}

.el-table th {
  background-color: #6a11cb;
  color: white;
  font-weight: bold;
}

.el-table tr:hover {
  background-color: rgba(106, 17, 203, 0.1);
}

.el-button--primary {
  background-color: #6a11cb;
  border-color: #6a11cb;
}

.el-button--primary:hover {
  background-color: #2575fc;
  border-color: #2575fc;
}

.el-dialog {
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.el-dialog__header {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: white;
  border-radius: 10px 10px 0 0;
}

.el-dialog__title {
  color: white;
}

.el-form-item__label {
  color: #6a11cb;
}

.el-input__inner {
  border-radius: 5px;
  border: 1px solid #6a11cb;
}

.el-input__inner:focus {
  border-color: #2575fc;
  box-shadow: 0 0 5px rgba(37, 117, 252, 0.5);
}

.el-select .el-input__inner {
  border-radius: 5px;
  border: 1px solid #6a11cb;
}

.el-select .el-input__inner:focus {
  border-color: #2575fc;
  box-shadow: 0 0 5px rgba(37, 117, 252, 0.5);
}
</style>